<template>
<div class="dashboard-container">
  <el-tree
    :load="loadNode"
    :data="data"
    :props="defaultProps"
    lazy
    >
  </el-tree>
</div>
</template>

<script>

import { getConfig } from '@/api/config'


export default {
    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      loadNode(node, resolve){
        if(node.level === 0)return;
        let k = node.label;
        let _node = node;
        for (let i = node.level ; i > 1 ;i--){
          _node = _node.parent
          k = _node.label + "." + k
        }
        getConfig({name: k}).then(response=>{

          if(response.leaf) {
            let s = "";
            if(typeof(response.result) == 'string'){
              s = response.result
            } else{
              s = response.result[0]
              for(let i = 1 ; i < response.result.length; i++){
                s += "   |   "+response.result[i]
              }
            }
            resolve([{
              "label": s,//response.result,
              "leaf": true
            }])
          }else{
            let data = new Array()
            for(let i = 0 ; i < response.names.length ; i++) {
              console.log(data)
              data.push({"label": response.names[i], "leaf": false})
            }
            resolve(data)
          }
        })
      }
    },
    created: function(){
      getConfig().then(response => {
        for (let i = 0 ; i < response.result.length; i++) {
          this.data.push({
            "label": response.result[i]["name"],
            "leaf": false
          })
        }
      })
    },
    data() {
      return {
        filterText: '',
        data: [],
        defaultProps: {
          label: 'label',
          isLeaf: 'leaf'
        }
      };
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-container {
  margin: 10px;
}
</style>
